<template>
  <div class="date-filter">
    <h3 class="filter-title">
      日期筛选
      <span class="current-selection">{{ currentSelectionText }}</span>
    </h3>
    
    <div class="filter-options">
      <div 
        v-for="option in dateOptions" 
        :key="option.value"
        class="filter-option"
        :class="{ active: selected === option.value }"
        @click="handleSelect(option.value)"
      >
        <div class="option-content">
          <el-icon class="option-icon">
            <component :is="option.icon" />
          </el-icon>
          <div class="option-text">
            <div class="option-label">{{ option.label }}</div>
            <div class="option-date">{{ option.date }}</div>
          </div>
        </div>
        <div class="option-indicator" v-if="selected === option.value">
          <el-icon><Check /></el-icon>
        </div>
      </div>
    </div>
    
    <div class="calendar-section">
      <el-button 
        type="primary" 
        text
        @click="showCalendar = !showCalendar"
        class="calendar-toggle"
        :class="{ active: showCalendar }"
      >
        <el-icon><Calendar /></el-icon>
        {{ showCalendar ? '收起日历' : '选择其他日期' }}
      </el-button>
      
      <div v-if="showCalendar" class="calendar-container">
        <el-date-picker
          v-model="customDate"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleCustomDateChange"
          style="width: 100%;"
          :clearable="false"
        />
        
        <div class="calendar-actions">
          <el-button size="small" @click="handleQuickSelect('yesterday')">昨天</el-button>
          <el-button size="small" @click="handleQuickSelect('today')">今天</el-button>
          <el-button size="small" @click="handleQuickSelect('tomorrow')">明天</el-button>
          <el-button size="small" @click="showCalendar = false">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { Calendar, Check, Clock, Star, Timer, Histogram } from '@element-plus/icons-vue'
import { getYesterday, getToday, getTomorrow, getDayAfterTomorrow, formatDate } from '../utils/date'

export default {
  name: 'DateFilter',
  components: {
    Calendar,
    Check,
    Clock,
    Star,
    Timer,
    Histogram
  },
  props: {
    selected: {
      type: String,
      default: 'today'
    },
    customDate: {
      type: String,
      default: ''
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const showCalendar = ref(false)
    const customDate = ref('')
    
    const dateOptions = computed(() => [
      {
        value: 'yesterday',
        label: '昨天',
        date: formatDate(getYesterday()),
        icon: 'Histogram'
      },
      {
        value: 'today',
        label: '今天',
        date: formatDate(getToday()),
        icon: 'Star'
      },
      {
        value: 'tomorrow',
        label: '明天',
        date: formatDate(getTomorrow()),
        icon: 'Clock'
      },
      {
        value: 'dayAfterTomorrow',
        label: '后天',
        date: formatDate(getDayAfterTomorrow()),
        icon: 'Timer'
      }
    ])
    
    const handleSelect = (value) => {
      emit('change', value)
      showCalendar.value = false
    }
    
    const handleCustomDateChange = (date) => {
      if (date) {
        // 检查是否是预设的日期
        const yesterday = getYesterday()
        const today = getToday()
        const tomorrow = getTomorrow()
        const dayAfterTomorrow = getDayAfterTomorrow()
        
        if (date === yesterday) {
          handleSelect('yesterday')
        } else if (date === today) {
          handleSelect('today')
        } else if (date === tomorrow) {
          handleSelect('tomorrow')
        } else if (date === dayAfterTomorrow) {
          handleSelect('dayAfterTomorrow')
        } else {
          // 自定义日期，通知父组件
          emit('change', 'custom', date)
          showCalendar.value = false
        }
      }
    }
    
    const handleQuickSelect = (type) => {
      handleSelect(type)
    }
    
    const currentSelectionText = computed(() => {
      if (props.selected === 'custom' && props.customDate) {
        // 自定义日期显示
        const customDateObj = new Date(props.customDate)
        const customDateStr = customDateObj.toLocaleDateString('zh-CN', { 
          month: 'short',
          day: 'numeric' 
        })
        return `· ${customDateStr}`
      } else {
        // 预设日期显示
        const currentOption = dateOptions.value.find(option => option.value === props.selected)
        return currentOption ? `· ${currentOption.label}` : ''
      }
    })
    
    return {
      showCalendar,
      customDate,
      dateOptions,
      currentSelectionText,
      handleSelect,
      handleCustomDateChange,
      handleQuickSelect
    }
  }
}
</script>

<style scoped>
.date-filter {
  padding: 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}

.filter-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-selection {
  font-size: 12px;
  font-weight: 400;
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--el-color-primary-light-7);
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.filter-option:hover {
  background: var(--el-fill-color-light);
}

.filter-option.active {
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
  transform: translateX(2px);
}

.option-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.filter-option.active .option-icon {
  color: var(--el-color-primary);
  transform: scale(1.1);
}

.filter-option.active .option-label {
  color: var(--el-color-primary);
  font-weight: 600;
}

.option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.option-date {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.option-indicator {
  color: var(--el-color-primary);
  font-size: 16px;
}

.calendar-section {
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 16px;
}

.calendar-toggle {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 0;
  font-size: 14px;
  transition: all 0.2s ease;
}

.calendar-toggle.active {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.calendar-container {
  margin-top: 12px;
  padding: 12px;
  background: var(--el-fill-color-extra-light);
  border-radius: 6px;
  border: 1px solid var(--el-border-color-lighter);
}

.calendar-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: space-between;
}

.calendar-actions .el-button {
  flex: 1;
}
</style> 